<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>维修记录</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>

<body>
    <div id="app">
        <!--导航切换-->
        <div class=".p-30">
            <el-form label-width="10px" :model="check" ref="verification">
                <el-row type="flex">
                    <el-form-item prop="name" label-width="30px">
                        <el-input v-model="check.name" placeholder="请输入物资名称" style="width:150px"></el-input>
                    </el-form-item>
                    <el-form-item prop="incident">
                        
                        <!-- <el-select v-model="check.goods_id" placeholder="请选择分类名称" filterable>
                            <el-option v-for="(item, index) in goodsdata" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select> -->

                        <el-cascader
                              v-model="check.goods_id"
                              placeholder="请选择分类名称"
                             :options="goodsdata"
							 :props="{label:'name',value:'id'}"
                            >

                              </el-cascader>


                    </el-form-item>
                    <el-form-item prop="applicant">
                        <el-date-picker style="width:190px" v-model="check.start_time" type="date" placeholder="开始时间"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="applicant">
                        <el-date-picker style="width:190px" v-model="check.ent_time" type="date" placeholder="结束时间"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search_for" size="medium">搜&ensp;&ensp;索</el-button>
                        <el-button @click="resetForm('verification')" size="medium">重&ensp;&ensp;置</el-button>
                        <el-button type="primary" icon="el-icon-tickets" @click="jump" size="small" style="height:36px">
                            维&ensp;&ensp;修
                        </el-button>
                        <el-button type="primary" icon="el-icon-download" @click="export_file" size="small"
                            style="height:36px">导&ensp;&ensp;出</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <!-- 表格 -->
            <div class="main">
                <el-table :data="tableData" border='' style="width:100%" type="flex" justify="center"
                    v-loading="loading" :span-method="objectSpanMethod" @cell-mouse-enter="handleCellMouseEnter"
                    @cell-mouse-leave="handleCellMouseLeave">
                    <el-table-column label="维修单号" width="200" align='center' prop="repair_number">
                    </el-table-column>
                    <el-table-column label="所属单位（人）" width='200' align='center' prop="checkcategory.name"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="维修时间" width="160" prop="created_at" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="物资名称" width="160" align='center' prop="materia.name">
                    </el-table-column>
                    <el-table-column label="物资分类" width="160" align='center' prop="goods.name">
                    </el-table-column>
                    <el-table-column label="数&ensp;&ensp;量" width="160" align='center' prop="repair_num">
                    </el-table-column>
                    <el-table-column label="维修详情" width="160" align='center' prop="repair_remark">
                    </el-table-column>
                    <el-table-column label="申请人" width="160" align='center' prop="users.name">
                    </el-table-column>
                    <el-table-column label="操&ensp;&ensp;作" width="250" fixed="right" align='center'>
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleClick1(scope.row)">
                                修&ensp;&ensp;改
                                <!-- <a :href="'/admin/warehouse/repairaddview?id=' + scope.row.id" style="color:white">修  改</a> -->
                            </el-button>
                            <el-button type="primary" size="mini" @click=Inventory(scope.row)>
                                维修单
                                <!-- <a :href="'/admin/warehouse/outboundfour?file=' + scope.row.file" style="color:white">维修单</a> -->

                            </el-button>
                            <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)"
                                size="mini">删&ensp;&ensp;除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
    </div>
    </div>
    <script src="/css/exam/js/vue.js"></script>
    <script src="/css/elementui/index.js"></script>
    <script src="/css/exam/js/axios.min.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                visibleCancel: '',
                visiblePublish: '',
                dialogVisible: false,
                get_warehouse_type: [],
                goodsdata: [], // 请选择物资分类
                get_house_type: [], //请选择物资名称
                check: {
                    name: '',
                    goods_id: '',
                    start_time: '',
                    ent_time: ''
                },
                tableData: [], //数据
                currentPage: 1, // 当前页码
                count: 30, // 总条数
                pageSize: 10, // 每页的数据条数


            }
        },
        created() {
            this.search_for()
            // this.classification()
            this.wuzifenlei()

        },
        methods: {

            // 鼠标移入
            handleCellMouseEnter(row, column, cell, event) {
                this.$nextTick(() => {
                    //获取鼠标移入时的tbody结点
                    const tbody = this.$el.querySelector('.el-table__body-wrapper table tbody')
                    //循环获取tr结点
                    for (let i = 0; i < tbody.children.length; i++) {
                        const tr = tbody.children[i]
                        //逻辑判断，这步已经获取到了tr所以tableData[i]与tr是一致的
                        if (this.tableData[i].repair_number == row.repair_number) {
                            //改变tr的背景颜色
                            tr.style.background = '#f5f5f5'
                            //循环获取td,改变td的样式
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#f5f5f5'
                            }
                        } else {
                            tr.style.background = '#fff'
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#fff'
                            }
                        }
                    }

                    //这部分是为了修改固定列部分样式的代码，逻辑与上面的一致
                    const tbody_fix = this.$el.querySelector('.el-table__fixed table tbody')
                    for (let i = 0; i < tbody_fix.children.length; i++) {
                        const tr = tbody_fix.children[i]

                        if (this.tableData[i].repair_number == row.repair_number) {
                            tr.style.background = '#f5f5f5'
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#f5f5f5'
                            }
                        } else {
                            tr.style.background = '#fff'
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#fff'
                            }
                        }
                    }
                })

            },
            // 鼠标移出
            handleCellMouseLeave(row, column, cell, event) {
                //与鼠标移入的逻辑一致
                this.$nextTick(() => {
                    const tbody = this.$el.querySelector('.el-table__body-wrapper table tbody')
                    for (let i = 0; i < tbody.children.length; i++) {
                        const tr = tbody.children[i]

                        if (this.tableData[i].repair_number == row.repair_number) {
                            tr.style.background = '#fff'
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#fff'
                            }
                        }
                    }

                    //这部分是为了修改固定列部分样式的代码
                    const tbody_fix = this.$el.querySelector('.el-table__fixed table tbody')
                    for (let i = 0; i < tbody_fix.children.length; i++) {
                        const tr = tbody_fix.children[i]

                        if (this.tableData[i].repair_number == row.repair_number) {
                            tr.style.background = '#fff'
                            for (let j = 0; j < tr.children.length; j++) {
                                const td = tr.children[j]
                                td.style.background = '#fff'
                            }
                        }
                    }
                })
            },

            flitterData() {
                let spanOneArr = [];
                let concatOne = 0;
                let spanOneArr1 = []
                let concatOne1 = 0
                let spanOneArr2 = []
                let concatOne2 = 0
                this.tableData.forEach((item, index) => {

                    if (index === 0) {
                        spanOneArr.push(1);
                    } else {
                        //name 修改
                        if (item.repair_number === this.tableData[index - 1].repair_number) {
                            //第一列需合并相同内容的字段
                            spanOneArr[concatOne] += 1;
                            spanOneArr.push(0);
                        } else {
                            spanOneArr.push(1);
                            concatOne = index;
                        }
                        if (item.users === this.tableData[index - 1].users) { //第二列需合并相同内容的判断条件
                            spanOneArr1[concatOne1] += 1
                            spanOneArr1.push(0)
                        } else {
                            spanOneArr1.push(1)
                            concatOne1 = index
                        }
                        //   if(item.users!=null){
                        //     if(item.users.name === this.tableData[index - 1].users.name){
                        //       spanOneArr1[concatOne1] += 1
                        //       spanOneArr1.push(0)
                        //     }else{
                        //       spanOneArr1.push(1)
                        //       concatOne1 = index
                        //     }
                        // }
                        if (item.created_at === this.tableData[index - 1].created_at) {
                            spanOneArr2[concatOne2] += 1
                            spanOneArr2.push(0)
                        } else {
                            spanOneArr2.push(1)
                            concatOne2 = index
                        }

                    }


                });
                return {
                    one: spanOneArr,
                    two: spanOneArr1,
                    three: spanOneArr2
                };
            },


            validScore(event) {
                console.log(event.target.value)
            },


            objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    // this.tableData 修改
                    const _row = this.flitterData(this.tableData).one[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
                }
                if (columnIndex === 7) {
                    // this.tableData 修改
                    const _row = (this.flitterData(this.tableData).one)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
                }
                if (columnIndex === 2) {
                    // this.tableData 修改
                    const _row = (this.flitterData(this.tableData).one)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
                }
                if (columnIndex === 8) {
                    // this.tableData 修改
                    const _row = (this.flitterData(this.tableData).one)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
                }
            },


            // 带参数跳转到详情页面
            handleClick1(row) {
                localStorage.setItem("repair_number", row.repair_number)
                console.log('row.repair_number', row.repair_number);

                window.location.href = `/admin/warehouse/repairaddview?id=${row.id}`
            },
            //
            Inventory(row) {
                console.log(row, 'row');
                axios.get('/admin/file_exist', {
                        params: {
                            url: row.file
                        }
                    })
                    .then((res) => {
                        console.log(res.data.code);
                        if (res.data.code == 1) {
                            this.$message({
                                message: '该维修单不存在，请联系管理员',
                                type: 'info'
                            })
                            return
                        }
                        let url = row.file
                        let file_name = row.file_name
                        let link = document.createElement("a")
                        link.style.display = "none"
                        link.href = url
                        link.setAttribute = file_name
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)


                    })
                    .catch((err) => {
                        console.log(err);
                    });


            },
            //请选择分类名称
            // async classification() {
            //     let res = await axios.get('/admin/goods/category')
            //     console.log('res', res);
            //     this.goodsdata = res.data.data

            // },
           
               async wuzifenlei(){
            let res = await axios.post('/admin/goods/goodslistdata')
            this.goodsdata = res.data.data.list
            console.log('res11111111111', this.goodsdata);


            },


            //获取物资名称
            async ChangeGoods(val) {
                let res = await axios.post('/admin/materialList/material_all', {
                    goods_id: val
                })
                this.get_house_type = res.data.data

            },


            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.check.name = ''
                this.check.goods_id = ''
                this.check.start_time = ''
                this.check.ent_time = ''
                this.search_for()
            },
            //搜索回显
            async search_for() {

            let a = this.check.goods_id.toString()

            let array = a.split(',')

            let last = array[array.length-1]

            console.log(last,'lats');

                this.loading = true
                let res = await axios.get('/admin/repair/list', {
                    params: {
                        name: this.check.name,
                        goods_id: last,
                        start_time: this.check.start_time,
                        end_time: this.check.ent_time,
                        page: this.currentPage,
                        limit: this.pageSize
                    }

                })
                console.log('res', res);
                this.tableData = res.data.data
                this.count = res.data.count
                this.loading = false
            },
            //跳到维修页面
            jump() {
                window.location.href = href = "/admin/warehouse/repairaddview"
            },

            // 删除列表行
            deleteRow(index, rows) {
                console.log('rows', rows.id);
                this.$confirm('确定要删除吗?', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',

                    })
                    .then(() => {
                        axios.get('/admin/repair/delete', {
                                params: {
                                    repair_number: rows.repair_number
                                }
                            })
                            .then(response => {
                                console.log('response', rows.repair_number);
                                this.search_for()
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            }).catch(error => {
                                console.log('请求失败：' + error);
                            })
                    })
            },
            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.search_for()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.search_for()
            },
            //导出文件
            export_file() {
                axios.get('/admin/repair/excel_url', {
                        params: {
                            name: this.check.name,
                            goods_id: this.check.goods_id,
                            start_time: this.check.start_time,
                            end_time: this.check.ent_time
                        }
                    })
                    .then((res) => {
                        let url = res.data.data.url
                        let file_name = '物资维修记录表'
                        let link = document.createElement("a")
                        link.style.display = "none"
                        link.href = url
                        link.setAttribute = file_name
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link)
                    })
                    .catch((err) => {
                        console.log(err);
                    });

            }


        },

    })
    </script>
    <style scoped>
    .el-table .el-table__cell:first-child {
        text-align: center;
    }

    .dashboard_text {
        height: 45px;
        line-height: 45px;
        background-color: #f3f3f3;
        padding-left: 30px;
        margin-bottom: 30px;
    }

    .p-30 {
        margin: 0 auto;
    }

    .main {
        padding: 0px 30px;
    }

    a {
        color: #409EFF;
        text-decoration: none;
    }
    </style>
</body>

</html>